import React, { Component, PropTypes } from 'react';
import Module from '../../lib/module'

import { Button } from 'antd';
import $ from 'jquery'

import { mConfig, textureCube } from './mConfig'

class CarShow3D extends Module {
    constructor(props, context) {
        super(props, context);
        this.state = {};
    }

    componentDidMount() {
        //兼容性检测
        !Detector.webgl &&  Detector.addGetWebGLMessage();
        this.carInit()
    }

    carInit() {
        let {height, width, name, car} = this.props;
        let CARS = mConfig[this.props.car];
        let loader = new THREE.BinaryLoader();

        /**
         * 创建远景相机
         * PerspectiveCamera( fov, aspect, near, far )
         * fov: 相机垂直视角
         * aspect: 相机视锥体宽高比
         * near: 相机视锥体近裁剪面
         * far: 相机视锥远裁剪面
         */
        this.camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);

        /**
         * 创建场景
         */
        this.scene = new THREE.Scene();

        /**
         * 环境光
         */
        this.light = new THREE.AmbientLight( 0x404040 ); // soft white light
        this.scene.add( this.light );

        /**
         * 平行光
         */

        this.directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
        this.directionalLight.position.set( 2, 1.2, 10 ).normalize();
        this.scene.add( this.directionalLight );

        this.directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
        this.directionalLight.position.set( -2, 1.2, -10 ).normalize();
        this.scene.add( this.directionalLight );

        /**
         * WebGL渲染器
         * @type {THREE.WebGLRenderer}
         */
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setClearColor('rgb(255,255,255)',1);

        /**
         * 设置设备像素比。通常用于HiDPI设备防止模糊输出canvas。
         */
        this.renderer.setPixelRatio(window.devicePixelRatio);

        /**
         * setSize ( width, height, updateStyle )
         * 调整输出canvas尺寸
         */
        this.renderer.setSize(width, height);

        /**
         * 用于设定GPU中gl的fontFace和cullFace状态，从而启用/禁用渲染时的面剔除。
         */
        this.renderer.setFaceCulling(THREE.CullFaceNone);

        $("."+name).append(this.renderer.domElement);

        this.bindEvent(name);

        loader.load(CARS.url, (geometry) => {
            this.createScene(geometry, car)
        });

    }

    createScene(geometry, car) {

        let m = new THREE.MultiMaterial();  //多种材料
        let _mmap = mConfig[car].mmap;    //材质配置

        /**
         * 材质赋值
         */
        for(let i=0, len=_mmap.length; i<len; i++) {
            m.materials[i] = _mmap[i];
        }


        /**
         * 创建网格模型
         * geometry: 几何模型
         * m: 材质
         */
        this.mesh = new THREE.Mesh(geometry, m);
        this.mesh.rotation.x = 0;
        this.mesh.rotation.y = -Math.PI/2;
        this.mesh.rotation.z = 0;


        //向场景添加模型
        this.scene.add(this.mesh);

        /**
         * 机位
         * @type {number}
         */
        this.camera.position.z = 220;
        this.camera.position.y = 30;
        this.camera.position.x = 0;

        // this.createSphere()

        this.renderer.render( this.scene, this.camera );
    }

    createSphere() {
        var geometry = new THREE.SphereGeometry( 5, 32, 32 );
        var material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
        var sphere = new THREE.Mesh( geometry, material );
        sphere.position.y = 100;
        sphere.position.x = 100;
        sphere.position.z = 100;
        this.scene.add( sphere );
    }

    bindEvent(name) {
        $("."+name).on('mousedown', ()=>{
            //记录触发是坐标
            this.moveY = event.clientX;
            $("."+name).on('mousemove.y', ()=>{
                let _rotateY;
                if((event.clientX - this.moveY) > 0) {
                    _rotateY = Math.PI/90
                }
                if((event.clientX - this.moveY) < 0) {
                    _rotateY = -Math.PI/90
                }
                if((event.clientX - this.moveY) == 0) {
                    return;
                }
                this.moveY = event.clientX;
                this.scene.rotateY(_rotateY);
                this.renderer.render( this.scene, this.camera );
            } );
        } );

        $("."+name).on('mouseup', ()=>{
            $("."+name).off('mousemove.y');
        } );


    }


    render() {
        let {height, width, name, car} = this.props;
        return <div className={name + " N_car_show"} style={{width: width+"px", height: height+"px"}}>
            {this.props.children}
        </div>
    }
}

export default CarShow3D;